<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/static/img/logo/logo2.ico">
    <link rel="stylesheet" href="/static/test/bootstrap/css/bootstrap.css">
    <title>pg_chat index</title>
</head>
<body>
    <div id="app">
        <div id = "welcome">
            welcome {{username}} !!
        </div>
        <button><a href="/logOut"> 退出 </a></button>
        <button @click="getUserInfo"> 个人信息 </button>
        <div v-if="isShow">
            <div v-for="(value, key) in info">
                <span class="bar text-info">{{key}}:</span>
                <span class="text-info" @click="edit(key)">{{value}}</span>
                <input v-if="isEdit" class="input-sm" type="text" v-model="value4Edit" />
                <button type="button" class="btn-sm" v-if="isEdit"></button>
            </div>
            <button @click="showMessage">关闭</button>
        </div>
        <button @click="showFiends">好友信息</button>

    </div>
</body>
    <script src="/static/JS/vue/vue_3_2_29/vue.global.js"></script>
    <script src="/static/JS/axios/axios.js"></script>
    <script th:inline="javascript">
        const Counter = {
            data(){
                return{
                    isShow: false,
                    isEdit: false,
                    authState: false,
                    userId: [[${userId}]],
                    username: [[${username}]],
                    info: [{
                        userId: '',
                        userState: '',
                        age: '',
                        sex: '',
                        emailAddr: '',
                        phoneNumber: '',
                        signature: '',
                        intro: '',
                        headPortrait: '',
                        birthday: '',
                        createTime: '',
                        updateTime: ''
                    }],
                    friList: [],
                    friNum: '',
                    friends:[],
                    friendMsg: [{
                        friId: '',
                        friName: '',
                        friState: '',
                        signature: '',
                    }],
                    value4Edit: ''
                }
            },
            methods:{
                //时间转换
                transTime(datetime, precise) {
                    let date = new Date(datetime);
                    let YY = date.getFullYear() + '-';
                    let MM = (date.getMonth() + 1 < 10
                        ? '0' + (date.getMonth() + 1)
                        : date.getMonth() + 1) + '-';
                    let DD = (date.getDate() < 10
                        ? '0' + (date.getDate())
                        : date.getDate());

                    if(precise === 'yy-mm-dd')
                        return YY + MM + DD;

                    let HH = ' ' + (date.getHours() < 10
                        ? '0' + (date.getHours())
                        : date.getHours()) + ':';
                    let mm = (date.getMinutes() < 10
                        ? '0' + (date.getMinutes())
                        : date.getMinutes()) + ':';
                    let SS = (date.getSeconds() < 10
                        ? '0' + (date.getSeconds())
                        : date.getSeconds());
                    if(precise === 'yy-mm-dd hh:mm:ss')
                        return YY + MM + DD + HH + mm + SS;
                }, sexExchange(sex){//性别
                    if(sex === 0)
                        return '男';
                    else if(sex === 1)
                        return '女';
                    else if(sex === 2)
                        return '未知';

                }, userStatusExchange(status){
                    if(status === 0)
                        return '未知';
                    if(status === 1)
                        return '在线';
                    if(status === 2)
                        return '下线';
                    if(status === 3)
                        return '非法';
                    if(status === 4)
                        return '封禁';
                    if(status === 5)
                        return '在忙';
                } ,infoExchange(infoMsg){//信息转换
                    const con = this;
                    infoMsg.sex = con.sexExchange(infoMsg.sex);
                    infoMsg.birthday = con.transTime(infoMsg
                        .birthday, 'yy-mm-dd');
                    infoMsg.createTime = con.transTime(infoMsg
                        .createTime, 'yy-mm-dd');
                    infoMsg.updateTime = con.transTime(infoMsg
                        .updateTime, 'yy-mm-dd');

                    return infoMsg;
                }, print(){

                }, showMessage(){
                    const con = this;
                    con.isShow = !con.isShow;
                }, getUserInfo(){
                    const con = this;
                    axios({
                        method: 'post',
                        url: '/userInfo',
                        params: {
                            account: con.userId
                        }
                    }).then(respond=>{
                        let resData = respond.data;
                        let code = resData.code;
                        let msg = resData.message;
                        if(code === 0) {
                            con.info = con.infoExchange(resData.data);
                            con.showMessage();
                        }else
                            alert(msg);
                        console.log(resData);
                    }).catch(err=>{
                        console.log(err)
                    })
                }, showFiends(){
                    const con = this;
                    axios({
                        method: 'post',
                        url: '/friendsList',
                        params: {
                            account: con.userId
                        }
                    }).then(res => {
                        let resData = res.data;
                        let code = resData.code;
                        let msg = resData.message;
                        let data = resData.data;

                        if(code === 0){
                            con.friList = data.item;
                            con.friNum = data.total;

                        }else{
                            alert(msg);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }, addFiends(){
                    const con = this;
                    axios({
                        method: 'post',
                        url: '/addFriends',
                        params: {
                            friends: con.friends
                        }
                    }).then(res => {
                        let resData = res.data;
                        let code = resData.code;
                        let msg = resData.message;
                        let data = resData.data;

                        if(code === 0){
                            alert(data);

                        }else{
                            alert(msg);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }, deleteFiends(){
                    const con = this;
                    axios({
                        method: 'post',
                        url: '/deleteFriends',
                        params: {
                            friends: con.friends
                        }
                    }).then(res => {
                        let resData = res.data()
                        let code = resData.code;
                        let msg = resData.message;
                        let data = resData.data;

                        if(code === 0){
                            alert(data);

                        }else{
                            alert(msg);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }, updateFiends(){
                    const con = this;
                    axios({
                        method: 'post',
                        url: '/updateFriends',
                        params: {
                            friends: con.friends
                        }
                    }).then(res => {
                        let resData = res.data()

                        if(resData.code === 0){
                            alert(resData.data);

                        }else{
                            alert(resData.message);
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                },changeStatus(key){
                    const con = this;
                    if(key === 'userStatus'){
                        axios({
                            method: 'post',
                            url: '/changeStatus',
                            params:{
                                status: con.info.userState
                            }
                        }).then(res=>{
                            let resData = res.data;
                            if(resData.code === 0){
                                alert(resData.data);

                            }else{
                                alert(resData.message);
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }


            }
        };
        const app = Vue.createApp(Counter).mount('#app');
    </script>

    <script type="text/javascript">
        window.onload = function(){
            function welcome() {
                let funcWelcome = document.getElementsByName("welcome");
                const WshShell = new ActiveXObject("WScript.Shell");
                funcWelcome.innerHTML = "Welcome " + WshShell.ExpandEnvironmentString("%COMPUTERNAME%");
            }
        }
    </script>
</html>